<template>
    <!--规则草图规范导入导出  -->
    <div class="ruleCtImport">
        <!-- 标题 -->
        <div class="title">
            <ul>
                <li class="act">规则草图规范化导入导出</li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="con">
                <!-- 检索表单 -->
                <el-form :inline="true" :model="form">
                    <el-form-item>
                        <el-input style="width: 400px; height: 40px" clearable v-model="form.inputVal"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-right: 27%">
                        <el-button size="mini" style="
                width: 120px;
                height: 40px;
                border-radius: 6px;
                background-color: #4271c4;
                color: #fff;
                font-size: 20px;
              " icon="el-icon-search" @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="
                width: 120px;
                height: 40px;
                border-radius: 6px;
                background-color: #4271c4;
                color: #fff;
                font-size: 20px;
              " @click="handleClick({}, '4')">上传</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="
                width: 120px;
                height: 40px;
                border-radius: 6px;
                background-color: #4271c4;
                color: #fff;
                font-size: 20px;
              " @click="handleDb">打包</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="
                width: 120px;
                height: 40px;
                border-radius: 6px;
                background-color: #4271c4;
                color: #fff;
                font-size: 20px;
              " @click="handleXML">XML输出</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" style="
                width: 120px;
                height: 40px;
                border-radius: 6px;
                background-color: #4271c4;
                color: #fff;
                font-size: 20px;
              " @click="handleJSON">json输出</el-button>
                    </el-form-item>
                </el-form>
                <!-- 表格内容 -->
                <el-table height="75vh" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" width="55">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"> </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fileName" label="文件名称"> </el-table-column>
                    <el-table-column prop="type" label="类型"> </el-table-column>
                    <el-table-column prop="jb" label="级别"> </el-table-column>
                    <el-table-column prop="sx" label="属性"> </el-table-column>
                    <el-table-column prop="glFile" label="关联文件"> </el-table-column>
                    <el-table-column prop="time" label="时间"> </el-table-column>
                    <el-table-column prop="dec" label="描述"> </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row, '1')" type="text" size="small">详情</el-button>
                            <el-button @click="handleClick(scope.row, '2')" type="text" size="small">修改</el-button>
                            <el-button @click="handleClick(scope.row, '3')" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination style="margin-top: 5px; float: right; background: #fff" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]" :page-size="pageSize" :total="total"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
                    <el-form :disabled="isDisable == '1' ? true : false" :model="formList" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="文件名称：">
                                    <el-input v-model="formList.fileName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="时间：">
                                    <el-input v-model="formList.time"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="文件类型：">
                                    <el-input v-model="formList.type"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="文件属性：">
                                    <el-input v-model="formList.sx"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="级别：">
                                    <el-input v-model="formList.jb"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="关联文件：">
                                    <el-input v-model="formList.glFile"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="描述：">
                                    <textarea style="width: 100%; height: 100px" v-model="formList.dec"></textarea>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="文件上传：">
                                    <el-input v-model="formList.glFile"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="拍摄上传：">
                                    <el-input v-model="formList.glFile"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div v-if="isDisable == '1'" slot="footer" class="dialog-footer" style="text-align: center">
                        <el-button style="
                width: 160px;
                height: 40px;
                background: #4271c4;
                color: #fff;
              " @click="handleSubmit(1)">保存</el-button>
                        <el-button style="
                width: 160px;
                height: 40px;
                background: #ffffff;
                color: #4171c4;
                border: 1px solid #4171c4;
              " @click="handleSubmit(2)">取消</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                inputVal: "",
            },
            formList: {
                fileName: "",
                type: "",
                jb: "",
                sx: "",
                glFile: "",
                time: "",
                dec: "",
            },
            dialogTitle: "", //弹窗标题
            allData: [],
            filterList: [],
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: "",
            dialogVisible: false,
            isDisable: "1",
        };
    },
    mounted() {
        this.allData = [
            {
                id: 1,
                fileName: "文件1",
                type: "JPG",
                jb: "一级",
                sx: "图片",
                glFile: "文件11",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 2,
                fileName: "文件2",
                type: "XML",
                jb: "二级",
                sx: "图片",
                glFile: "文件21",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 3,
                fileName: "文件3",
                type: "PNG",
                jb: "三级",
                sx: "图片",
                glFile: "文件31",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
            {
                id: 4,
                fileName: "文件4",
                type: "JPG",
                jb: "二级",
                sx: "文件",
                glFile: "文件41",
                time: "2017-02-23",
                dec: "xxxxxxxxxxxxxxxxx",
            },
        ];
        this.getCurrentPageData(this.allData, this.pageSize, this.currentPage);
    },
    watch: {
        pageSize: {
            handler(val) {
                this.getCurrentPageData(this.allData, val, this.currentPage);
            },
        },
        currentPage: {
            handler(val) {
                this.getCurrentPageData(this.allData, this.pageSize, val);
            },
        },
    },
    methods: {
        // 关于分页==========================
        // 获取当前页的数据
        getCurrentPageData(dataList, pageSize, currentPage) {
            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            let newList = [];
            let _search = this.form.inputVal.toLowerCase();
            if (_search) {
                dataList.filter((item) => {
                    if (item.fileName.toLowerCase().indexOf(_search) !== -1) {
                        newList.push(item);
                    }
                });
                this.filterList = newList;
            } else {
                this.filterList = dataList;
            }
            this.total = this.filterList.length;
            this.tableData = this.filterList.slice(start, end);
            return this.filterList.slice(start, end);
        },
        // 数据序号
        getIndex($index) {
            return (this.currentPage - 1) * this.pageSize + $index + 1;
        },
        // 当前页码数改变事件
        handleCurrentChange(data) {
            this.currentPage = data;
        },
        // 每页条数改变事件
        handleSizeChange(data) {
            this.pageSize = data;
        },
        // 关于查询及按钮操作========================
        // 查询
        handleSearch() {
            this.getCurrentPageData(this.allData, this.pageSize, this.currentPage);
        },
        // 上传
        handleUp() { },
        // 打包
        handleDb() { },
        // XML输出
        handleXML() { },
        // JSON输出
        handleJSON() { },
        // 关于表格操作事件
        handleClick(data, num) {
            console.log(data);
            this.dialogVisible = true;
            switch (num) {
                case "1":
                    // 详情
                    this.dialogTitle = "详情";
                    this.formList = data;
                    break;
                case "2":
                    // 修改
                    this.dialogTitle = "修改";
                    break;
                case "3":
                    // 删除
                    break;
                case "4":
                    // 上传
                    this.isDisable = "2";
                    this.formList = {
                        fileName: "",
                        type: "",
                        jb: "",
                        sx: "",
                        glFile: "",
                        time: "",
                        dec: "",
                    };

                    this.dialogTitle = "上传";
                    break;

                default:
                    break;
            }
        },
        // 表格复选框事件
        handleSelectionChange(data) {
            console.log(data);
        },
        //关于弹窗
        handleSubmit(num) {
            switch (num) {
                case 1:
                    // 保存
                    this.tableData.unshift(this.formList);
                    this.$message({
                        type: "success",
                        message: "上传成功！",
                    });
                    this.dialogVisible = false;
                    break;
                case 2:
                    // 取消
                    this.formList = {
                        fileName: "",
                        type: "",
                        jb: "",
                        sx: "",
                        glFile: "",
                        time: "",
                        dec: "",
                    };
                    this.$message({
                        type: "warning",
                        message: "您已取消上传！",
                    });
                    this.dialogVisible = false;
                    break;

                default:
                    break;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.ruleCtImport {
    .title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #fff;
        border-bottom: 2px solid #707070;

        ul {
            width: 20%;
            height: 99.9%;
            display: flex;
            justify-content: space-around;

            li {
                cursor: pointer;
                padding: 0 10px;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
            }

            .act {
                color: #05acb5;
                border-bottom: 2px solid #05acb5;
            }
        }
    }

    .content {
        padding: 10px;
        box-sizing: border-box;

        .con {
            width: 100%;
            background: #fff;
            padding: 20px 15px 40px;
            box-sizing: border-box;
        }
    }
}
</style>